<template>
  <view class="search">
    <view class="search-header flex-between-center">
      <view class="flex-center p-10">
        <IconFont font-class-name="iconfont" class-prefix="icon" name="yuyin" size="24" class="m-l-20 m-r-20 search-icon">
        </IconFont>
        <IconFont font-class-name="iconfont" class-prefix="icon" name="paizhao" size="24"
          class="m-l-10 m-r-20 f-bold search-icon">
        </IconFont>
      </view>
      <nut-input class="input" :border="false" placeholder="请输入汉字" @focus="searchFocus" />
      <IconFont name="search" size="24" class="m-l-20 m-r-20 search-icon p-10"></IconFont>
    </view>
    <Content></Content>
  </view>
</template>
<script setup name="Search">
definePageConfig({
  navigationBarTitleText: '搜索',
})
import { IconFont } from '@nutui/icons-vue-taro';
import { ref } from 'vue';
import Content from './content'
import Taro from '@tarojs/taro'

function searchFocus() {
  console.log('的那几')
  Taro.navigateTo({
    url:"/pages/search-input/index"
  })
 }

</script>
<style lang="scss">
.input {
  background-color: #F3F5F8;
  border-radius: 12px;
  color: $color-actived;
  position: relative;

  &::after {
    content: '';
    width: 20px;
    height: 20px;
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
  }
}

.search {
  height: 100%;

  .search-header {
    height: 85px;
  }
}

.search-icon {
  color: $color-base3;
}
</style>